<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>OPPO</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <style>
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        #banner {
            height: 630px;
        }

        .swiper-container {
            width: 100%;
            height: 632px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <!-- 页面的顶部 -->
    <div id="top">
        <div class="container"></div>
    </div>
    <!-- 页面的头部 -->
    <div id="header">
        <div class="container">
            <div id="header_left left">
                <div class="xlwb"></div>
                <div class="txwb"></div>
                <div class="tel">4001-666-888</div>
            </div>
            <ul class="right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">积分兑换</a></li>
                <li><a href="#">帮助中心</a></li>
                <li class="shop_car"><span></span><a href="#">购物车</a></li>
            </ul>
        </div>
    </div>
    <!-- 页面的导航栏 -->
    <div id="nav">
        <div class="container">
            <div class="left">
                <img src="img/logo.png">
            </div>
            <ul class="right">
                <li><a href="#">首页</a></li>
                <li><a href="#">手机</a></li>
                <li><a href="#">配件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">体验店</a></li>
                <li><a href="#">软件商店</a></li>
                <li><a href="#">ColorOS</a></li>
            </ul>
        </div>
    </div>
    <!-- 页面的轮播图部分 -->
    <div id="banner">
        <!-- <div class="container"></div> -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/banner1.jpg" width="100%;" height="630"></div>
                <div class="swiper-slide"><img src="img/banner2.jpg" width="100%;" height="630"></div>
                <div class="swiper-slide"><img src="img/banner3.jpg" width="100%;" height="630"></div>
                <div class="swiper-slide"><img src="img/banner4.jpg" width="100%;" height="630"></div>

            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next">1</div>
            <div class="swiper-button-prev"></div>
        </div>
        <div class="banner-nav-bg"></div>
    </div>
    <!-- 页面的明星机型部分 -->
    <div id="star">
        <div class="container">
            <div class="star_top">
                <img src="img/i-c-title.png">
            </div>
            <ul>
                <li>
                    <div>
                        <img src="img/20141030152751NRihyRENa7.jpg">
                    </div>
                    <h2>N3</h2>
                    <p>1600万电动旋转摄像头</p>
                    <p class="money">￥3999 <a href="#">立即购买</a> <span></span></p>
                </li>
                <li class="line"></li>
                <li>
                    <div>
                        <img src="img/20141029162235J7aJmCHkFm.jpg">
                    </div>
                    <h2>R5</h2>
                    <p>薄至4.85mm</p>
                    <p class="money">￥2999 <a href="#">立即购买</a> <span></span></p>
                </li>
                <li class="line"></li>
                <li>
                    <div>
                        <img src="img/20150120092342k2ABsEHnQN.jpg">
                    </div>
                    <h2>R1C</h2>
                    <p>钻石流光镜面</p>
                    <p class="money">￥2999 <a href="#">立即购买</a> <span></span></p>
                </li>
                <li class="line"></li>
                <li>
                    <div>
                        <img src="img/20150423183545tYnFzYnn3p.jpg">
                    </div>
                    <h2>A31</h2>
                    <p>尽在掌握</p>
                    <p class="money">￥999 <a href="#">立即购买</a> <span></span></p>
                </li>
            </ul>
        </div>
    </div>
    <!-- 页面的精选配件部分 -->
    <div id="accessory">
        <div class="container">
            <div class="acc_top">
                <img src="img/wb.png" alt="">
            </div>
            <div class="acc_main">
                <div class="acc_left left">
                    <div>
                        <img src="img/20150413174400N0dPnxUKHk.jpg" alt="">
                    </div>
                    <div class="acc_all">
                        <p>OPPO手机官网ACCESSORY配件</p>
                        <ul>
                            <li><a href="#">耳机</a></li>
                            <li><a href="#">移动电源</a></li>
                            <li><a href="#">保护壳</a></li>
                            <li><a href="#">贴膜</a></li>
                            <li><a href="#">皮套</a></li>
                            <li><a href="#">数据线</a></li>
                        </ul>
                        <h2 class="line"></h2>
                        <p class="acc"><a href="#">全部配件</a><span></span></p>
                    </div>
                    <div>
                        <img src="img/20131120165101xYIYzhkVEy.jpg" alt="">
                    </div>
                    <div>
                        <img src="img/20150413174340NLV2gvV4FU.jpg" alt="">
                    </div>
                </div>
                <div class="acc_right right">
                    <div><img src="img/20150123182505RO822scYYt.jpg"></div>
                    <div><img src="img/20141230145609l7Fsk7CdHy.jpg"></div>
                    <div><img src="img/20141011101157yZEFpMrk0h.jpg"></div>
                    <div><img src="img/201410270957132inlm3IwsV.jpg"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面的搜索欧珀部分 -->
    <div id="world">
        <div class="container">
            <div class="world_top">
                <img src="img/weibo.png">
            </div>
            <div class="world_main">
                <div class="world_left left">
                    <div class="a1 fade">
                        <div>
                            <img src="img/201403261455420lqMPNGENc.png">
                        </div>
                    </div>
                    <div class="a2 fade">
                        <div>
                            <img src="img/20150226100534QqezQ85N6y.jpg">
                        </div>
                    </div>
                    <div class="a3 fade">
                        <div>
                            <img src="img/20140926184007v2rjcVFcbW.jpg">
                        </div>
                    </div>
                    <div class="a4 fade">
                        <div>
                            <img src="img/20131212113902waaLqQUWfB.jpg">
                        </div>
                    </div>
                </div>
                <div class="world_right right">
                    <div class="world_title">
                        <div class="news">新闻</div>
                        <div class="weibo">微博</div>
                    </div>
                    <ul>
                        <li>
                            <dl>
                                <dt><img src="img/20150227161036GqO59Dvta2.jpg"></dt>
                                <dd>OPPO R5金色版 打造纽约时装周梦幻之旅</dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt><img src="img/201502271135596D2wBJxvH0.jpg"></dt>
                                <dd>OPPO 手机携手时尚大咖 首度打造杂志封面大片 </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt><img src="img/20140604145924CFBnAtVjqN.jpg"></dt>
                                <dd>业界革命 OPPO发布全球最高灵敏度平面振膜耳机</dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt><img src="img/20140919101741cvR0TcGkaq.jpg"></dt>
                                <dd>极致原音　OPPO PM-1耳机斩获EISA年度HIFI大奖</dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面的服务部分 -->
    <div id="serve">
        <div class="container">
            <ul>
                <li>
                    <dl>
                        <dt></dt>
                        <dd class="dd1">正品保障</dd>
                        <dd class="dd2">所有商品都是原装正品</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt></dt>
                        <dd class="dd1">79元起包邮</dd>
                        <dd class="dd2">高效的物流直达配送</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt></dt>
                        <dd class="dd1">7天退换货</dd>
                        <dd class="dd2">支持7天退货，30天换货</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt></dt>
                        <dd class="dd1">285自提点</dd>
                        <dd class="dd2">轻松自在，覆盖各大城市</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt></dt>
                        <dd class="dd1">356家客服网点</dd>
                        <dd class="dd2">专业保修服务就在家门口</dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 页面的售后服务部分 -->
    <div id="after_sale">
        <div class="container">
            <ul>
                <li>
                    <ol>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">关于OPPO</a></li>
                        <li><a href="#">新闻中心</a></li>
                        <li><a href="#">人才招聘</a></li>
                    </ol>
                </li>
                <li>
                    <ol>
                        <li><a href="#">推荐机型</a></li>
                        <li><a href="#">N3</a></li>
                        <li><a href="#">R5</a></li>
                        <li><a href="#">R1C</a></li>
                        <li><a href="#">Find7</a></li>
                    </ol>
                </li>
                <li>
                    <ol>
                        <li><a href="#">购物相关</a></li>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">周边产品</a></li>
                        <li><a href="#">OPPO体验店</a></li>
                        <li><a href="#">客户服务政策</a></li>
                    </ol>
                </li>
                <li>
                    <ol>
                        <li><a href="#">会员中心</a></li>
                        <li><a href="#">产品注册</a></li>
                        <li><a href="#">会员注册</a></li>
                        <li><a href="#">会员登录</a></li>
                    </ol>
                </li>
                <li>
                    <ol>
                        <li><a href="#">关注我们</a></li>
                        <li><span class="xl"></span><a href="#">新浪微博</a></li>
                        <li><span class="tx"></span><a href="#">腾讯微博</a></li>
                        <li><span class="people"></span><a href="#">人人网</a></li>
                        <li><span class="qq"></span><a href="#">QQ空间</a></li>
                    </ol>
                </li>
                <li>
                    <ol>
                        <li><a href="#">联系我们</a></li>
                        <li class="li1"><span class="tel"></span>
                            <h3>4001-666-888</h3>
                        </li>
                        <li class="tip">7*24小时客服电话</li>
                        <li class="li1"><span class="server"></span>
                            <h3>在线客服</h3>
                        </li>
                        <li class="tip">服务时间：8:30-22:00</li>
                    </ol>
                </li>
            </ul>
        </div>
    </div>
    <!-- 页面的底部 -->
    <div id="footer">
        <div class="container">
            <p>
                <img src="img/i-f-logo.png">
                <span>@2020 北京市xxxxxx</span>
                <a href="#">版权说明</a>
                <a href="#">使用协议</a>
                <a href="#">网站地图</a>
                <a href="#">友情链接</a>
                <a href="#">联系我们</a>
            </p>
        </div>
    </div>
    <!-- 返回顶部 -->

    <div id="totop">
        <a href="#" id="btn"></a>
    </div>
    <script type="text/javascript" src="js/swiper.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <!-- 这一部分JS不可用 -->
    <script type="text/javascript">

        // 页面加载后执行
        window.onload = function () {
            //找到页面中的按钮
            var totop = document.getElementById("btn");
            //吸顶灯效果
            var nav = document.getElementById("nav");
            var navTop = nav.offsetTop;
            var timer = null;
            totop.style.display = "none";

            //给按钮绑定点击事件 ///这里设置失败！！！！
            totop.onclick = function () {
                timer = setInterval(function () {
                    //获取滚动条距离浏览器顶端的距离
                    var backTop = document.documentElement.scrollTop || document.body.scrollTop;
                    document.documentElement.scrollTop -= 100;
                    if (backTop == 0) {
                        clearInterval(timer);
                    }
                }, 30);
            }

            //设置临界值
            var pageHeight = 700;
            //按键是否显示功能
            window.onscroll = function () {
                var backTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (backTop > pageHeight) {
                    totop.style.display = "block";
                } else {
                    totop.style.display = "none";
                }
                //吸顶灯效果
                if(backTop >= navTop){
                    nav.style.position = "fixed";
                    nav.style.top = "0";
                    nav.style.left = "0";
                    nav.style.width = "100%";
                    nav.style.zIndex = "100";
                }else{
                    nav.style.position = "";
                }
            }
        }
    </script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            loop: true,
            autoplay: 3000,


            speed: 1000,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            effect: 'fade',//  effect: 'flip',effect: 'coverflow',slide', 'fade',cube
            grabCursor: true,
            cube: {
                shadow: false,
                slideShadows: false,
                shadowOffset: 20,
                shadowScale: 0.94
            }
        });
    </script>
</body>

</html>